<script>
import moment from "moment";
import {getImgUrl, treeField} from "@/until/tool.js";

export default {
  props: {
    typeId: {
      type: Number, // 直接显示所指定 栏目 ID 的内容列表
      default: 0,
    },
    isReturn: {
      type: Boolean,
      default: false,
    }
  },
  data() {
    return {
      typeData: [], treeSelect: [], treeExpanded: [], treeField, moment,
      addTypeValue: {}, imgShowValue: null,
      bool: {
        isType: false,
        isImg: false,
        isShow: false,
      },
      listData: [], addData: {},
      pageObj: {
        total: 10,
        current: 1,
        pageSize: 1000,
        showTotal: true,
        showJumper: true,
        showPageSize: true,
        pageSizeOptions: [10, 15, 30, 50, 100],
      }
    }
  },
  mounted() {
    this.getTypeData()
  },
  methods: {
    async treeChange(data) {
      this.treeSelect = data;
      this.typeData.forEach(value => {
        if (value.TypeId === data[0]) {
          this.addTypeValue = value;
        }
      })
      this.pageObj.current = 1;
      //  this.typeData = 0
      await this.getData(data[0]);
    },
    async getData(TypeId) {
      this.listData = []
      let Obj = {};
      Obj["current"] = this.pageObj.current - 1;
      Obj["pageSize"] = this.pageObj.pageSize;
      Obj["typeId"] = TypeId;
      const res = await this.$Http.upFileSea(Obj)
      if (res["Data"]["Data"]) {
        this.listData = res.Data["Data"].reverse();
        this.pageObj.total = res["Data"]["DataCount"];
      }
    },
    onChange(current) {
      this.pageObj.current = current;
      this.getData(this.addTypeValue.TypeId)
    },
    async getTypeData() {
      const res = await this.$Http.upFileType({parentId: 1})
      if (res.Data) {
        this.typeData = res.Data;
        if (this.typeId !== 0) {
          await this.treeChange([this.typeId])
          return
        }
        await this.treeChange([this.typeData[0].TypeId])
      }
    },
    addType() {
      this.addTypeValue = {
        TypeId: 0,
        TypeName: null,
      }
      this.bool.isType = true;
    },
    editType() {
      this.bool.isType = true;
    },
    async SaveType() {
      let Obj = {}
      Obj['TypeName'] = this.addTypeValue.TypeName;
      if (this.addTypeValue.TypeId > 0) {
        Obj['TypeId'] = this.addTypeValue.TypeId;
        const res = await this.$Http.upFileTypeEdit(Obj)
        if (res.Data) {
          this.$message.success('编辑成功!')
        }
      } else { // 添加
        Obj['ParentId'] = 1;
        const res = await this.$Http.upFileTypeAdd(Obj)
        if (res.Data) {
          this.$message.success('添加成功!')
        }
      }
      this.bool.isType = false
      await this.getTypeData()
    },
    async delType() {
      if (this.addTypeValue.TypeId < 7) {
        this.$message.error('删除失败!系统栏目不能删除!')
        this.bool.isType = false
        return
      }
      const res = await this.$Http.upFileTypeDel({typeId: this.addTypeValue.TypeId})
      if (res.Data) {
        this.$message.success('删除成功!')
      } else {
        this.$message.error('删除失败!')
      }
      this.bool.isType = false
      await this.getTypeData()
    },
    getSrc(url) {
      return getImgUrl(url)
    },
    async delData(data) {
      if (!data) return
      await this.$Http.delUpFile({DelFls: [data["Uid"]]})
      this.$message.success('删除成功!')
      await this.treeChange(this.treeSelect)
    },
    showImg(url) {
      if (this.isReturn) {
        this.$emit("setImage", (url));
        return
      }
      this.bool.isImg = true;
      this.imgShowValue = getImgUrl(url)
    },
    addDataShow() {
      this.bool.isShow = true;
      if (this.addTypeValue.TypeId === 0) {
        window.location.reload()
        return
      }
      this.addData = {
        Uid: null,
        TypeId: this.addTypeValue.TypeId,
      }
    },
    async saveData() {
      if (this.addData.Uid === "") {
        this.$message.error("错误,未上传文件!");
        return;
      }
      const arr = this.addData.Uid.split(".");
      await this.$Http.upFileEdit({Uid: arr[0], TypeId: this.addData.TypeId});
      this.bool.isShow = false;
      await this.treeChange([this.addData.TypeId]);
    },
    async customRequest(option) {
      const {fileItem, name} = option;
      const formData = new FormData();
      formData.append(name || "file", fileItem.file);
      const res = await this.$Http.upFile(formData);
      if (res["fdown"]) {
        this.addData.Uid = res["fdown"];
        this.$message.success("上传成功");
      }
    },
    filterTreeNode(searchValue, nodeData) {
      return nodeData.TypeName.toLowerCase().indexOf(searchValue.toLowerCase()) > -1;
    },
  },
}
</script>

<template>
  <a-row :gutter="[8,8]">
    <a-col :span="4">
      <a-card title="图片分类">
        <template #extra>
          <a-space>
            <a-button type="primary" @click="addType">
              添加
            </a-button>
            <a-button type="dashed" @click="editType">
              编辑
            </a-button>
          </a-space>
        </template>
        <a-tree size="large" :fieldNames="treeField" :data="typeData" :show-line="true"
                v-model:selected-keys="treeSelect" v-model:expanded-keys="treeExpanded"
                @select="treeChange"
        />
      </a-card>
    </a-col>
    <a-col :span="20">
      <a-card>
        <a-button type="primary" @click="addDataShow()">
          <component is="icon-plus"/>
          添加图片
        </a-button>
        <div class="list">
          <div v-for="item of listData" :key="item['Uid']">
            <p @click="showImg(item['Uid'] + item['Ftype'])">
              <a-tooltip :content="item['Fname']">
                <img :src="getSrc(item['Uid'] + item['Ftype'])" alt="">
              </a-tooltip>
            </p>
            <p>
              <a-tooltip :content="item['Fname']"><span class="">  {{ item["Fname"] }}</span></a-tooltip>
            </p>
            <p class="">
              <a-space>
                <a-popconfirm :content="`确诊删除 ${item['Uid']} ?`" @ok="delData(item)" okText="删除" cancelText="取消">
                  <a-tag>
                    <component is="icon-delete"/>
                    删除
                  </a-tag>
                </a-popconfirm>
                <a-button type="primary" v-show="isReturn" @click="showImg((item['Uid'] + item['Ftype']))">选择</a-button>
              </a-space>
            </p>
          </div>
        </div>
        <a-pagination hideOnSinglePage v-model="pageObj.current" :pageSize="pageObj.pageSize" :total="pageObj.total" @change="onChange" show-less-items/>
      </a-card>
    </a-col>
  </a-row>
  <a-modal :title="addTypeValue.TypeId===0?'添加分类':'编辑分类'" v-model:visible="bool.isType" :footer="null" @cancel="bool.isType===false">
    <a-form>
      <a-form-item label="分类名称">
        <a-input v-model="addTypeValue.TypeName" placeholder="分类名称"/>
      </a-form-item>
      <a-form-item>
        <a-space>
          <a-button type="primary" @click="SaveType">{{ addTypeValue.TypeId === 0 ? "添加" : "编辑" }}</a-button>
          <a-button @click="delType">{{ addTypeValue.TypeId === 0 ? "取消" : "删除" }}</a-button>
        </a-space>
      </a-form-item>
    </a-form>
  </a-modal>
  <a-modal :title="null" :width="600" v-model:visible="bool.isImg" :footer="null" @cancel="bool.isImg===false" :closable="false">
    <img :src="imgShowValue" style="max-width: 100%" alt="">
  </a-modal>
  <a-modal title="添加图片" v-model:visible="bool.isShow" :footer="null" @cancel="bool.isShow===false">
    <a-form>
      <a-form-item label="所属分类">
        <a-tree-select size="large" v-model:model-value="addData.TypeId" :filter-tree-node="filterTreeNode"
                       :data="typeData" :fieldNames="treeField" :allow-search="true"
                       placeholder="其他"
        ></a-tree-select>
      </a-form-item>
      <a-form-item label="图片地址">
        <a-input v-model="addData.Uid" placeholder="图片地址"/>
        <a-upload
            :show-file-list="false"
            :custom-request="customRequest"
        >
          <template #upload-button>
            <a-button type="primary">
              上传
            </a-button>
          </template>
        </a-upload>
      </a-form-item>
      <a-form-item>
        <a-space>
          <a-button type="primary" @click="saveData">{{ "添加" }}</a-button>
          <a-button @click="bool.isShow=false">{{ "取消" }}</a-button>
        </a-space>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<style scoped lang="less">
.list {
  display: flex;flex-wrap: wrap;

  > div {
    width: 180px;text-align: center;margin-bottom: 20px;margin-right: 10px; display: flex;flex-direction: column;overflow: hidden;

    p {
      &:first-child {
        overflow: hidden;height: 100px;

        img {
          width: 160px;height: auto;cursor: pointer;
          }
        }

      }

    span {
      cursor: pointer;
      }
    }
  }
</style>
